<!DOCTYPE html>
<html>
	<head>
		<!-- gb2312是中文标志<meta charset="GB2312"/> 在特殊情况下中文不会乱码-->
		
		<meta charset="utf-8" />
	<!--<meta name="keywords" content="推广关键字"/>
		<meta name="description" content="网站介绍"/> -->

		<title>悦轩饼家</title>
		<link rel="stylesheet" href="css/a01.css">
		<link rel="stylesheet" href="font/iconfont.css">
		<style></style>
	</head>
	<body>
		<div>
			<h3 style="text-align: center;">江雪</h3>
			<p class="a01">千山鸟飞绝，</p>
			<p class="a01">万径人踪灭。</p>
			<p class="a01">孤舟蓑笠翁，</p>
			<p class="a01">独钓寒江雪。</p>
		</div>
		
		<a href="https://www.baidu.com/" target="_self">百度一下但是在本网页</a>
		<a href="https://www.baidu.com/" target="_blank">百度一下但是新标签栏跳转</a>
		<!--a标签的样式 <target="_self">本网页跳转
			a标签的样式 <target="_blank">新标签栏跳转
		-->
		<br>
		<span class="iconfont icon-sousuo1">这是一段话</span>
		
		<div style="height: 100px;width: 500px;border: 1px solid #cccccc;text-align: center;line-height: 100px;">这段话是上下左右居中的一段话</div>
		<div style="height: 100px;width: 500px;border: 1px solid #cccccc;background-color: coral;">这段话是有背景的</div>
		<div style="height: 500px;width: 500px;border: 1px solid #cccccc;background-image: url(img/QQ图片20220614103254.jpg);background-repeat: no-repeat;">这段话是有背景的</div>
		
		
		
		<p style="
		width: 500px; height:300px; border: 1px solid #cccccc;background-image: url(img/QQ图片20220614103254.jpg);
		background-repeat: no-repeat;
		background-position:20px 30px;">图片背景</p>
		<!-- background-position可以调整背景图片的位置 -->
		
		
		<p style="
		width: 500px; height:600px; border: 1px solid #cccccc;background-image: url(img/QQ图片20220614103254.jpg);
		background-repeat: no-repeat;
		background-size:contain;">图片最窄边</p>
		<p style="
		width: 500px; height:600px; border: 1px solid #cccccc;background-image: url(img/QQ图片20220614103254.jpg);
		background-repeat: no-repeat;
		background-size:cover;">图片最宽边</p>
		<!-- background-size: contain;以最窄的边做参考，显示完整图片-->
		<!-- background-size: cover;以最宽的边做参考，填充满容器宽高-->
		


		<header style=
		"width: 100%;
		height: 100px;
		border: 1px solid ttcccccc;
		background-image: url(img/line-bg.jpg);background-repeat: repeat-x;">页眉</header>
		
		<p style="width: 600px;height: 300px; border: 1px solid #cccccc;
		background-color: #cccccc;
		background-image: url(img/QQ图片20220614103254.jpg);
		background-repeat: no-repeat;
		background-position:center center;">浅灰色背景，且显示背景图片</p>
		<!-- 下面是简写 -->
		<p style="width: 600px;height: 300px; border: 1px solid #cccccc;
		background: #cccccc url(img/QQ图片20220614103254.jpg) no-repeat center center;">浅灰色背景，且显示背景图片</p>
		
		
		
		<p style="width: 600px;height: 300px; border: 1px solid #cccccc;
		background-color: #cccccc;
		background-image: url(img/01.png);
		background-position:center center;">网格背景</p>
	</body>
</html>
